<template>
  <a-drawer
    placement="top"
    :closable="false"
    :visible="addVisible"
    height="100%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#f0f1f5',
      padding: '0 0.2rem 0 0.3rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.3rem 0 0 0',
      flexGrow: 1,
    }"
    :drawerStyle="{
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <span>添加新仓库</span>
        <div class="head-btn">
          <a-button @click="closeTopDrawer">取消</a-button>
          <a-button type="primary" class="save-btn" @click="saveAdd"
            >保存</a-button
          >
        </div>
      </div>
    </template>
    <div class="content-box">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="content-width">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="货物名称" prop="goodsName" required>
                <a-input v-model="form.goodsName" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="规格型号" prop="model" required>
                <a-input v-model="form.model" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="货物数量" prop="goodsNumber" required>
                <a-input
                  v-model="form.goodsNumber"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="货物单价" prop="unitPrice" required>
                <a-input
                  v-model="form.unitPrice"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="货物总价" prop="totalPrice" required>
                <a-input
                  v-model="totalPrice"
                  class="input-width"
                  disabled
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12"
              ><a-form-model-item label="入库人" prop="inUser" required>
                <a-input
                  v-model="form.inUser"
                  class="input-width"
                ></a-input> </a-form-model-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="入库时间" prop="inTime" required>
                <a-date-picker
                  v-model="form.inTime"
                  :disabled-date="disabledStartDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="入库时间"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="出库时间" prop="outTime" required>
                <a-date-picker
                  v-model="form.outTime"
                  :disabled-date="disabledEndDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="出库时间"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="出库数量" prop="outNumber" required>
                <a-input
                  v-model="form.outNumber"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="库存" prop="inventory" required>
                <a-input
                  v-model="form.inventory"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="出库人" prop="outUser" required>
                <a-input v-model="form.outUser" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="对应项目" prop="stationName" required>
                <div class="model-box add-width">
                  <template v-if="stationId">
                    <div class="member-box">
                      <div class="station-text">
                        {{ form.stationName }}
                      </div>
                      <a-icon
                        type="close"
                        class="close-icon"
                        @click="deleteStation"
                      />
                    </div>
                  </template>
                  <div class="add-btn" @click="$refs.StationModal.openModal()">
                    <a-icon type="plus" />
                    电站
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
    <StationModal
      ref="StationModal"
      :id.sync="stationId"
      @onSubmit="stationSubmit"
    ></StationModal>
  </a-drawer>
</template>
<script>
import { stashSaveSingle } from "@/api/operationApi.js";
import moment from "moment";
export default {
  data() {
    return {
      form: {
        goodsName: "",
        model: "",
        goodsNumber: "",
        unitPrice: "",
        totalPrice: "",
        inTime: "",
        outTime: "",
        inUser: "",
        outNumber: "",
        inventory: "",
        outUser: "",
        stationName: "",
      },
      rules: {
        goodsName: [
          {
            required: true,
            message: "请填写货物名称",
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            message: "请填写规格型号",
            trigger: "blur",
          },
        ],
        goodsNumber: [
          {
            required: true,
            message: "请填写货物数量",
            trigger: "blur",
          },
        ],
        unitPrice: [
          {
            required: true,
            message: "请填写货物单价",
            trigger: "blur",
          },
        ],
        totalPrice: [
          {
            required: true,
            message: "请填写货物总价",
            trigger: "blur",
          },
        ],
        inTime: [
          {
            required: true,
            message: "请填写入库时间",
            trigger: ["blur", "change"],
          },
        ],
        outTime: [
          {
            required: true,
            message: "请填写出库时间",
            trigger: ["blur", "change"],
          },
        ],
        inUser: [
          {
            required: true,
            message: "请选择入库人",
            trigger: ["blur", "change"],
          },
        ],
        outNumber: [
          {
            required: true,
            message: "请填写出库数量",
            trigger: "blur",
          },
        ],
        inventory: [
          {
            required: true,
            message: "请填写库存",
            trigger: "blur",
          },
        ],
        outUser: [
          {
            required: true,
            message: "请选择出库人",
            trigger: ["blur", "change"],
          },
        ],
        stationName: [
          {
            required: true,
            message: "请选择对应项目",
            trigger: ["blur", "change"],
          },
        ],
      },
      stationId: "",
    };
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.form.outTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.inTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    saveAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("params");
          const params = JSON.parse(JSON.stringify(this.form));
          params.inTime = moment(params.inTime).format("YYYY-MM-DD HH:mm:ss");
          params.outTime = moment(params.outTime).format("YYYY-MM-DD HH:mm:ss");
          console.log(params);
          stashSaveSingle(params).then((res) => {
            this.$message.success("新增仓库成功");
            this.$emit("reloadList");
            this.reset();
            this.$emit("update:addVisible", false);
          });
        } else {
          console.log(valid);
        }
      });
    },

    closeTopDrawer() {
      this.reset();
      this.$emit("update:addVisible", false);
    },
    reset() {
      this.form = {
        goodsName: "",
        model: "",
        goodsNumber: "",
        unitPrice: "",
        totalPrice: "",
        inTime: "",
        outTime: "",
        inUser: "",
        outNumber: "",
        inventory: "",
        outUser: "",
        stationName: "",
      };
      this.stationId = "";
    },
    stationSubmit(station) {
      this.stationId = station.id;
      this.form.stationName = station.stationName;
      console.log(station);
    },
    deleteStation() {
      this.stationId = "";
      this.form.stationName = "";
    },
  },
  computed: {
    totalPrice() {
      this.form.totalPrice = this.form.goodsNumber * this.form.unitPrice;
      return this.form.goodsNumber * this.form.unitPrice;
    },
  },
};
</script>
<style lang="less" scoped>
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .input-width {
      width: 80%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      /deep/.ant-form-item {
        margin-bottom: 10px;
        /deep/.ant-form-item-label {
          font-size: 12px;
          label {
            font-size: 14px;
          }
        }
      }
      /deep/.ant-form-explain {
        font-size: 12px;
      }
    }
    .model-box {
      width: 64.5%;
      height: 32px;
      padding: 2px 32px 2px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      display: flex;
      align-items: center;
      .member-box {
        height: 22px;
        padding: 0 8px;
        border-radius: 2px;
        background-color: rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        margin-right: 16px;
        .station-text {
          max-width: 480px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
        }
        .close-icon {
          font-size: 12px;
          margin-left: 12px;
          cursor: pointer;
          &:hover {
            color: #ff7875;
          }
        }
      }
      .add-btn {
        font-size: 12px;
        color: #048fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        height: max-content;
      }
    }
  }
}
</style>